<!-- 课程设计 -->
<template>
<div>
    <group gutter="0">
    <img src="../assets/wt.png" alt="" style="width:100%" >
    <!-- <swiper loop auto :list="list"></swiper> -->
    <panel :list="formated_list" @on-click-item="handleClick"></panel>  
    <divider>万通软件创新实验室</divider>
    </group>
</div>
</template>
<script>
    export default {
        data() {
            return {
                list: [],
                // list: [{
                //     url: '#',
                //     img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
                //     title: '一花'
                //     }, {
                //     url: '#',
                //     img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
                //     title: '一车'
                //     }, {
                //     url: '#',
                //     img: 'https://static.vux.li/demo/5.jpg', // 404
                //     title: '一旅行',
                //     fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
                //     }]
            };
        },
        computed: {
            formated_list() {
                var temp = [];
                this.list.forEach( elem => {
                    temp.push({
                        id: elem.id,
                        title: elem.title,
                        
                        src: require("../assets/wt.png"),
                        fallbackSrc: "http://placeholder.qiniudn.com/60x60/3cc51f/ffffff",
                    });
                });
                return temp;
            }
        },
        methods: {
            handleClick(item) {
                this.$router.push({ name: "class_design_detail", params: { id: item.id } });
            }
        },
        created() {
            this.ajax.post("all_in_one/list", {fid:3}).then( res => {
                this.list = res.data.data;
            });
        }
    };
</script>

<style scoped>
.black {
  background-color: #000;
}
.title{
  line-height: 100px;
  text-align: center;
  color: #fff;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.fadeInUp {
  animation-name: fadeInUp;
}
.header h2 {
    text-align: center;
}
.header {
    width: 100%;
    height:10%;
    background-color: bisque;
}
</style>